<template>
	<view class="days-calendar">
		<!-- 参营天数 -->
		<view class="section">
			<view class="section-title">参营天数</view>
			<view class="options">
				<view v-for="(item, idx) in days" :key="idx" class="option-item"
					:class="{ active: selected.days.includes(item) }" @click="toggleDay(item)">
					{{ idx === days.length - 1 ? '8天以上' : item + '天' }}
				</view>
			</view>
		</view>

		<!-- 参营日期 -->
		<view class="section">
			<view class="section-title">参营日期</view>
			<view class="section-desc">点击日期进行多选，顶部可切换月份</view>

			<u-calendar :show="true" mode="multiple" :pageInline="true" :showTitle="false" :showSubtitle="true"
				:lunar="false" :showConfirm="false" color="#1677FF" @confirm="onCalendarConfirm"
				style="padding: 20rpx 0;" :defaultDate="[]" :monthNum="7" />

			<!-- 已选班期 -->
			<view class="section-title" style="margin-top: 30rpx;">当前已选班期</view>
			<view class="select-calendar">
				<view class="calendar-tag" v-for="(date, idx) in selected.calendar" :key="idx">
					<view class="year">{{ date.split('-')[0] }}</view>
					<view class="month-day">{{ date.split('-')[1] }}-{{ date.split('-')[2] }}</view>
				</view>
			</view>
		</view>

		<!-- 确定按钮 -->
		<view class="confirm-btn" @click="handleSubmit">
			确定
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			days: [0.5, 1, 2, 3, 4, 5, 6, 7, 8],
			calendarValue: [],
			selected: {
				days: [],
				calendar: []
			}
		};
	},
	methods: {
		toggleDay(item) {
			const index = this.selected.days.indexOf(item);
			if (index >= 0) {
				this.selected.days.splice(index, 1);
			} else {
				this.selected.days.push(item);
			}
		},

		onCalendarConfirm(e) {
			console.log(11, e)
			this.selected.calendar = e;
		},


		handleSubmit() {
			const result = {
				selectedDays: this.selected.days.map(d =>
					typeof d === 'number' && d === 8 ? '8天以上' : d + '天'
				),
				selectedDates: this.selected.calendar
			};

			console.log('【最终提交数据】', result);

		}
	}
};
</script>

<style scoped>
.days-calendar {
	padding: 40rpx;
	background-color: #fff;
}

.section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
	padding-left: 10rpx;
	border-left: 4rpx solid #ff6700;
}

.section-desc {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 20rpx;
}

.options {
	display: flex;
	flex-wrap: wrap;
	gap: 16rpx;
}

.option-item {
	padding: 12rpx 24rpx;
	background-color: #f5f5f5;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #666;
	transition: all 0.2s ease;
	border: 1px solid #eee;
}

.option-item.active {
	background-color: #fbd8bc;
	color: #e65c00;
	border-color: #fbd8bc;
}

/* 已选日期区域 */
.empty-tip {
	font-size: 26rpx;
	color: #999;
}

.select-calendar {
	display: flex;
	gap: 5px;
	overflow: hidden;
	overflow-x: auto;
	flex-wrap: nowrap;
}

.calendar-tag {
	width: 60px;
	min-width: 60px;
	background-color: #fbd8bc;
	color: #e65c00;
	border-color: #fbd8bc;
	padding: 10rpx;
	border-radius: 10rpx;
	font-size: 24rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

/* 确定按钮 */
.confirm-btn {
	background-color: #e65c00;
	color: #fff;
	text-align: center;
	padding: 24rpx;
	border-radius: 12rpx;
	font-size: 30rpx;
	font-weight: bold;
}
</style>